body {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: url(assets/cursor.png);
}

body
{
  background-image: url(assets/texture_site.png);
  animation: checker-bg 5s infinite linear;
}

 @keyframes checker-bg { from {background-position: 0px 0px;} to {background-position: -128px 128px;} }

nav {
  display: flex ;
  width : 1000px ;
  align-items: center;
  height : 60px ;
  background-color: rgb(96, 213, 112);
  justify-content: space-around;
  border-style: solid;
 box-shadow: 5px 5px 20px black;
  margin-bottom: 40px;
  border-radius: 15px;
}

a {
font-family:"mabookregular" ;
font-size: 40px ;
color: rgb(96, 213, 112);
text-decoration: none;
}

a:hover { color: rgb(0, 6, 255) }

#back{
  position: fixed;
height: 90px;
width: 90px;
  top: 5px;
  left: 90px;
}


#serj
{
  display: flex ;
  
}

#daron
{
  display: flex ;
  
}

#shavo
{
  display: flex ;
  
}

#john
{
  display: flex ;
  
}

#underbody
{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 1000px ;
  height: 550;
}

.outline {

  color: black;
  text-shadow:
               3px 3px 3px black,
                3px 3px 3px black,
               3px 3px 3px black,
                3px 3px 3px black;
}

#box
{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 200px;
  height: 500px;
  background-color: rgb(96, 213, 112);
  box-shadow: 5px 5px 20px black;
  border-style: solid;
  border-color: black;
  border-width: 3px;
  border-radius: 15px;
}

#coolscroll

{
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  flex-flow: row wrap;
  width: 200px;
  height: 500px;
  overflow-y: scroll;
  scrollbar-color: color: rgb(0, 6, 255) ;
  scrollbar-width: 3px ;
}

#Tobias
{
  width: 180px;
  height: 180px;
  display: flex;
  background-image: url(assets/Tobias_icone.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#Adam
{
  width: 180px;
  height: 180px;
  display: flex;
  background-image: url(assets/Adam_icone.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#Ella
{
  width: 180px;
  height: 180px;
  display: flex;
  background-image: url(assets/Ella_icone.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#James
{
  width: 180px;
  height: 180px;
  display: flex;
  background-image: url(assets/James_icone.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#Ronnie
{
  width: 180px;
  height: 180px;
  display: flex;
  background-image: url(assets/goober.png);
  background-size: contain;
  background-repeat: no-repeat;
}


#reel
{
  display: flex;
  box-shadow: 5px 5px 20px black;
  width: 500px;
  height: 550px;;
  background-color: rgb(96, 213, 112);
  border-style: solid;
  border-width: 3px ;
  border-radius: 15px;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  margin-left: 50px;
}

#coolscroll3
{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 500px;
  height: 550px;
  overflow-x: scroll;
  scrollbar-color: color: rgb(0, 6, 255) ;
  scrollbar-width: 3px ;
  display: flex;
  flex-flow: row wrap;
  flex-direction: flex-end;
}

#image1
{
  width: 500px;
  height: 550px;
  display: flex;
  background-position: center;
  justify-content: space-around;
  background-image: url(assets/image_tobias1.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#image2
{
  width: 500px;
  height: 550px;
  display: flex;
  background-image: url(assets/image_tobias2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#image3
{
  width: 500px;
  height: 550px;
  display: flex;
  justify-content: space-around;
  background-image: url(assets/image_tobias3.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#image4
{
  width: 500px;
  height: 550px;
  display: flex;
  margin-top: 150px;
  background-image: url(assets/image_tobias4.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#image5
{
  width: 500px;
  height: 550px;
  display: flex;
  background-image: url(assets/image_tobias5.png);
  margin-top: 150px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#box2
{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 200px;
  height: 500px;
  background-color: rgb(96, 213, 112);
  box-shadow: 5px 5px 20px black;
  border-style: solid;
  border-color: black;
  border-width: 3px;
  border-radius: 15px;
  margin-left: 40px;
}

#coolscroll2
{
  display: flex;
  width: 200px;
  height: 500px;
  flex-flow: row;
  overflow-y: scroll;
  scrollbar-color: color: rgb(0, 6, 255) ;
  scrollbar-width: 3px ;
}


#text_oc
{
  font-family: "robotomedium";
  font-size: 15px;
  padding-left: 10px ;
  padding-right: 10px;;
}