@font-face {
    font-family:"Sour";
    src: url(../assets/SourGummy-Medium.ttf);
}


body{
  background-color:rgba(98, 246, 0, 0);
  font-size:25px;
  cursor: crosshair;
  font-family: "Sour";
}

.section{
 background-color:rgba(245, 241, 223, 0.891);
 width: 475px;
 height:1200px;
}

.box-text{
  padding-left: 25px;
  padding-top: 5px;
  font-size: 50px;
  text-align: left;
    color:rgb(206, 31, 66);
}

.list{
  padding-left: 25px;
  display: inline-block;
   width:calc(25% - 2.6rem);
    height:300px;
    margin-right:calc(2.6rem * 1.3);
    margin-bottom:calc(2.6rem * 1.3);
}


.friends{
  padding-left: 25px;
  color:rgb(85, 40, 0);
  width: auto;
  height: auto;
}

.Projects{
  padding-left: 25px;
   width: auto;
   height: auto;
   color:rgb(206, 31, 66);
}

a{
    color:rgb(85, 40, 0)
}
a:hover{
    color:rgb(255, 166, 255)
}

a:active{
    color:rgb(106, 198, 255)
}

 ul {
      list-style-type: none;
      margin:0;
      padding:0;
    }

@media screen and (max-width:720px) and (min-width:480px){
  .box-text{
    background-color:rgba(255, 0, 0, 0);
    width:calc(100% - 2.6rem);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 480px and narrower than 720px.*/
} 

@media screen and (max-width:720px) and (min-width:480px){
  .list{
    background-color:rgba(255, 0, 0, 0);
    width:calc(100% - 2.6rem);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 480px and narrower than 720px.*/
}