body{
    margin: 0;
    background-color: #EBEBEA;
    font-family: sans-serif;
}

    @font-face {
  font-family: Roboto-Regular;
  src: url("font/Roboto-Regular.ttf") format("truetype");
}


    @font-face {
  font-family: Roboto-Bold;
  src: url("font/Roboto-Bold.ttf") format("truetype");
}


    @font-face {
  font-family: Roboto-Italic;
  src: url("font/Roboto-Italic.ttf") format("truetype");
}



    @font-face {
  font-family: Roboto-Medium;
  src: url("font/Roboto-Medium.ttf") format("truetype");
}



a:link {
    color: #000000;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #000000;
    text-decoration:line-through;
}

/* mouse over link */
a:hover {
    color: #0921EA;
    text-decoration: underline;
}

/* selected link */
a:active {
    color: #D8CAD3;
}


#about{
    position: fixed;
    float: left;
    transform: rotate(-90deg);
    transform-origin: left top 0;
    top: 52%;
    left: 2%;
    font-size: 8pt;
    font-family: Roboto-Regular;
}

#home{
    position: fixed;
    float: left;
    transform: rotate(-90deg);
	transform-origin: left top 0;
    top: 52%;
    left: 2%;
    font-size: 8pt;
    font-family: Roboto-Regular;
}

#btnAbout{
    font-size: 2vw;
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor: pointer;
   font-family: Roboto-Regular;
}

#btnHome{
    font-size: 2vw;
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor: pointer;
    font-family: Roboto-Regular;
}

#sinopse{
    margin-left: 5%;
}

#foto1{
    position: absolute;
    width: 15%;
    top: 16%;
    left: 22%;
}

#foto2{
    position: absolute;
    width: 15%;
    top: 16%;
    left: 42%;
}
#foto3{
    position: absolute;
    width: 15%;
    top: 16%;
    left: 62%;
}

#foto4{
    position: absolute;
    width: 15%;
    top: 60%;
    left: 32%;
}

#foto5{
    position: absolute;
    width: 15%;
    top: 60%;
    left: 52%;
}


#gif1{
    position: absolute;
    float: center;
    height: 60%;
    margin-left: 27vw;
    margin-top: 12vw;
    align-content: center;
}


.textLink{
position: absolute;
font-size: 0.8vw;
margin-right: 30%;
margin-top: 50%;
margin-left: 41%;
text-align: center;
font-family: Roboto-Medium;
text-decoration: underline;

    }

.text1{
position: absolute;
font-size: 1vw;
margin-top: 22%;
margin-right: 30%;
margin-left: 22%;
font-family: Roboto-Regular;

    }

.text{
position: absolute;
font-size: 1.5vw;
margin-top: 12%;
margin-right: 30%;
margin-left: 22%;
font-family: Roboto-Bold;

    }

.textindet{
position: absolute;
font-size: 0.7vw;
margin-top: 54%;
margin-right: 30%;
margin-left: 22%;
font-family: Roboto-Light;

    }

.text3{
position: absolute;
background-color: #EBEBEA;
font-size: 0.8vw;
margin-right: 32%;
margin-left: 24%;
margin-top: 6%;
text-align: right;
font-family: Roboto-Italic;

    }


.ident{
position: absolute;
background-color: #EBEBEA;
font-size: 8pt;
margin-right: 32%;
margin-top: 53%;
margin-left: 24%;
text-align: justify;
font-family: Roboto-Regular;


}

#name {
    position: absolute;
    margin-right: 25%;
    margin-left: 37%;
    margin-top: 2%;
    font-size: 2vw;
    font-family: Roboto-Medium;
    text-align: center;

}
#name2 {
    position: absolute;
    margin-right: 32%;
    margin-left: 43%;
    margin-top: 5%;
    font-size: 1vw;
    font-family: Roboto-Regular;
    opacity: 60%;
    text-align: center;
}