.header { width: 100%; }

.header .nav { 
	text-align: center;
	letter-spacing: 1px; 
	font-weight: bold; 
	font-size: 14px;
	cursor: pointer;
}

.header .section { position: relative; width: 400px; margin: 0 auto; }

.line { 
	color: black;
	text-align: center; 
	bottom: 0; 
	width: 100px; 
	left:300px;
	position: absolute; 
}

.header .nav a {
	text-decoration: none;
	color: #000;
	height: 50px; 
	width: 100px;
	display: inline-block;
	text-align: center; 
	line-height: 50px; 
}

.line{
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.top:hover ~ .line{
	left:0 !important;
}
.about:hover ~ .line{
	left:100px !important;
}

.work:hover ~ .line{
	left:200px !important;
}
.contact:hover ~ .line{
	left:300px !important;
}

.top:target ~ .line {
	left: 0px;
}

.about:target ~ .line {
	left: 100px;
}

.work:target ~ .line {
	left: 200px;
}

.contact:target ~ .line {
	left: 300px;
}








@font-face {
	font-family: 'euclid';
	src: url(../font/EuclidFlexEDU-Medium-WebXL.woff);
	format:('woff')
  }

  body {
	  font-family: 'euclid';
  }





  .rectangle1 {
    position: absolute;
    top: 80px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle1:hover {
	  background-color: tomato;
  }


  .rectangle2 {
    position: absolute;
    top: 190px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle2:hover {
	  background-color: blue;
  }


  .rectangle3 {
    position: absolute;
    top: 300px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle3:hover {
	  background-color: rgb(252, 2, 252);
  }

  .rectangle4 {
    position: absolute;
    top: 410px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle4:hover {
	  background-color: tomato;
  }

  .rectangle5 {
    position: absolute;
    top: 520px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle5:hover {
	  background-color: blue;
  }


  .rectangle6 {
    position: absolute;
    top: 630px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle6:hover {
	  background-color: rgb(252, 2, 252);
  }


  .rectangle7 {
    position: absolute;
    top: 740px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle7:hover {
	  background-color: tomato;
  }


  .rectangle8 {
    position: absolute;
    top: 850px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle8:hover {
	  background-color: blue;
  }


  .rectangle9 {
    position: absolute;
    top: 960px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle9:hover {
	  background-color: rgb(252, 2, 252);
  }

  .rectangle10 {
    position: absolute;
    top: 1070px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle10:hover {
	  background-color: tomato;
  }


  .rectangle11 {
    position: absolute;
    top: 1180px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle11:hover {
	  background-color: blue;
  }


  .rectangle12 {
    position: absolute;
    top: 1290px;
    width: 1765px;
    height: 100px;
    background: black;
    border-radius: 10%
  
  }

  .rectangle12:hover {
	  background-color: rgb(252, 2, 252);
  }



  .day1 {
	  position: absolute;
	  top: -15px;
	  left: 780px;
	  color: white;
	  font-size: 90px;
	  font-family: 'euclid';
  }


.day2 {
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
}
 

.day3 {
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
}

.day4 {
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
}

.day5 {
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
}

.day6 {
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
}


.day7{
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
  white-space: nowrap;
}

.day8{
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
  white-space: nowrap;
}

.day9{
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
  white-space: nowrap;
}

.day10{
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
  white-space: nowrap;
}


.day11{
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
  white-space: nowrap;
}


.day12{
  position: absolute;
  top: -15px;
  left: 780px;
  font-size: 90px;
  color: white;
  white-space: nowrap;
}