* {
  box-sizing: border-box;
  text-align: center;
  scroll-behavior: smooth;
}
body{
  background-color: #00354f;
}
/*menu*/
a {
  color: rgba(255, 208, 0, 0.694);
  font-weight: bold;
  text-decoration: none;
  padding: 0;
  font-size: 1em;
  text-align: center;
  width: 100%;
  display: block;
  cursor: pointer;
  font-family: "Old Standard TT", serif;
}
a:hover {
  background-image: radial-gradient(rgb(78, 138, 160), rgb(68, 73, 174));
}
nav > ul {
  margin: 0;
  height: fit-content;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  align-items: top;
}
nav > ul > li {
  display: inline-block;
  min-width: 23.7vw;
  line-height: 3rem;
}
ul li ul li {
  display: none;
}
ul li > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(
    rgba(255, 196, 0, 0.3),
    rgba(182, 124, 17, 0.5)
  );
}
ul li:hover > ul li {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav > ul {
  position: fixed;
  background-color: rgba(12, 43, 71, 0.714);
  height: 3rem;
}
/*título principal Inês Bernardo*/
.título {
  font-weight: bold;
  font-variant: small-caps;
  font-family: "Satisfy", cursive;
  font-size: 23vmin;
  color: #ffd100;
  text-shadow: 0 0 0.1em #004367, 0 0 0.1em #004367, 0 0 0.1em #004367;
}
.box-1 {
  line-height: 26vmin;
  text-align: center;
  width: 100%;
  height: 100vh;
  padding: 65vmin 5vmin 0vmin 5vmin;
}
/*tamanho de tela para todas as páginas*/
.all {
  width: 100%;
  height: 100vh;
  /*border: 1px solid rgb(3, 3, 255);*/
  margin: 0;
  background-image: radial-gradient(#006298, #004b73, #00354f);
}
/*Página About*/
.about1 {
  font-family: Courgette, cursive;
  color: rgba(255, 208, 0);
  font-size: 5rem;
  justify-content: center;
  text-shadow: 0 0 0.1em #004367, 0 0 0.1em #004367, 0 0 0.1em #004367;
}
.about2 {
  font-family: "Old Standart TT", serif;
  color: rgba(255, 208, 0);
  font-size: 1.2rem;
  justify-content: center;
  text-shadow: 0 0 0.1em #004367, 0 0 0.1em #004367, 0 0 0.1em #004367;
}
/*Página Work*/
.work1 {
  font-family: Courgette, cursive;
  color: rgba(255, 208, 0);
  font-size: 5rem;
  justify-content: center;
  text-shadow: 0 0 0.1em #004367, 0 0 0.1em #004367, 0 0 0.1em #004367;
}
.work2 {
  font-family: "Old Standart TT", serif;
  color: rgba(255, 208, 0);
  font-size: 1.2rem;
  justify-content: center;
  text-shadow: 0 0 0.1em #004367, 0 0 0.1em #004367, 0 0 0.1em #004367;
}
/*Pàgina Contacts*/
.contact1 {
  font-family: Courgette, cursive;
  color: rgba(255, 208, 0);
  font-size: 5rem;
  justify-content: center;
  text-shadow: 0 0 0.1em #004367, 0 0 0.1em #004367, 0 0 0.1em #004367;
}
.contact2 {
  font-family: "Old Standart TT", serif;
  color: rgba(255, 208, 0);
  font-size: 1.4rem;
  justify-content: center;
  text-shadow: 0 0 0.1em #004367, 0 0 0.1em #004367, 0 0 0.1em #004367;
  align-items: center;
}
/*Primeira imagem*/
.item8IV {
  background-image: url(../img/aguarela.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  
}
/*Segunda Imagem*/
.item8V {
  background-image: url(../img/aguarela2.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Terceira Imagem*/
.item8VI {
  background-image: url(../img/autoretrato.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Quarta Imagem*/
.item8VII {
  background-image: url(../img/castanho.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Quinta Imagem*/
.item8VIII {
  background-image: url(../img/enxamenegro.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Sexta Imagem*/
.item8IX {
  background-image: url(../img/estabilizacaomutacao.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Sétima Imagem*/
.item8X {
  background-image: url(../img/harmoniadissonancia.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Oitava Imagem*/
.item8XI {
  background-image: url(../img/macioaspero.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Nona Imagem*/
.item8XII {
  background-image: url(../img/macioaspero2.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Décima Imagem*/
.item8XIII {
  background-image: url(../img/meninasentada.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Décima primeira Imagem*/
.item8XIV {
  background-image: url(../img/monotomoestimulante.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Décima segunda Imagem*/
.item8XV {
  background-image: url(../img/negro.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Décima terceira Imagem*/
.item8XVI {
  background-image: url(../img/ocorvo.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Décima quarta Imagem*/
.item8XVII {
  background-image: url(../img/pretoebranco.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Décima quinte Imagem*/
.item8XVIII {
  background-image: url(../img/rigidomaleavel.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Décima sétima Imagem*/
.item8XVIX {
  background-image: url(../img/superficieprofundidade.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
/*Grelha das imagens*/
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
.item5 {
  grid-area: e;
}
.item6 {
  grid-area: f;
}
.item7 {
  grid-area: g;
}
.item8 {
  grid-area: h;
}
.item9 {
  grid-area: i;
}
.item10 {
  grid-area: j;
}
.item11 {
  grid-area: k;
}
.item12 {
  grid-area: l;
}
.item13 {
  grid-area: m;
}
.item14 {
  grid-area: n;
}
.item15 {
  grid-area: o;
}
.grid-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    "a b c"
    "d e f"
    "g h i"
    "j k l"
    "m n o";
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 1fr 1fr 4fr 1fr 1fr;
  grid-gap: 10px;
  /*background-color: rgb(248, 110, 110);*/
  padding: 10px;
}
.grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  text-align: center;
  padding: 20px 0;
  display: inline;
}
/*Grelha da página Contacts*/
.grid-container4 {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    "d"
    "a"
    "b"
    "c";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 2fr;
  grid-gap: 10px;
  /*background-color: rgb(248, 110, 110);*/
  padding: 10px;
}
.grid-container4 > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  text-align: center;
  padding: 20px 0;
  display: flex;
}
.contact1 {
  grid-area: "a";
}
.contact2 {
  grid-area: "b";
}
.contact3 {
  grid-area: "c";
}
.contact4 {
  grid-area: "d";
}
/*Grelha página Work*/
.grid-container3 {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    "a"
    "b"
    "c";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 3fr;
  grid-gap: 10px;
  /*background-color: rgb(248, 110, 110);*/
  padding: 10px;
}
.grid-container3 > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  text-align: center;
  padding: 20px 0;
  display: flex;
}
.work1 {
  grid-area: "a";
}
.work2 {
  grid-area: "b";
}
.work3 {
  grid-area: "c";
}
/*Grelha da página About*/
.grid-container2 {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    "d"
    "a"
    "b"
    "c";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 3fr;
  grid-gap: 10px;
  /*background-color: rgb(248, 110, 110);*/
  padding: 10px;
}
.grid-container2 > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  text-align: center;
  padding: 20px 0;
  display: flex;
}
.about4 {
  grid-area: "d";
}
.about1 {
  grid-area: "a";
}
.about2 {
  grid-area: "b";
}
.about3 {
  grid-area: "c";
}
.spin {
  cursor: pointer;
  transform-style: preserve-3d;
}
.spin:hover {
    animation: anime 5s linear infinite;
}
@keyframes anime {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}