@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    12% {
        transform: translateY(-20px);
    }
    
    24% {
        transform: translateY(0);
    }
    
    36% {
        transform: translateY(-20px);
    }

    48% {
        transform: translateY(0);
    }
}

body{
  font-family:'Rubik';
  font-size:12px;
}

/*making the header line break*/
h1{
  margin:-15px 30px 0;
}

/*halfbox on this page is used for the bullet point boxes*/
.halfbox p{
  text-align:left;
  margin-left:10px;
}

/*moving bullet points to be in line with the caption*/
ul{
  margin-top:-33px;
  margin-left:60px;
}

/*the caption - wanted them to be equally justified rightways*/
.caption p{
  text-align:right;
  font-weight:bold;
  position:relative;
  left:-550px;
}

/*the flexbox for containing all the columns*/
.content{
  margin:50px auto;
  width:1000px;
  height:720px;
  background-color:red;
}

/*columns*/
.sidesmall, .main{
  height:100%;
}

/*sidebar column*/
.sidesmall{
  width:300px;
  background-color:#B3DEC1;
  text-align:center;
  position:relative;
}

.main{
  width:700px;
  background-color:#EAF0CE;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.box, .halfbox{
  font-size:15px;
  margin:0 10px;
}

/*underline*/
span {
  text-decoration:underline;
  color:#ff7614;
}

/*images*/
.i{
  display:flex;
  gap:20px;
  justify-content:center;
}

.i img{
  width:200px;
  height:200px;
  object-fit:cover;
}

/*blinkies*/
.b{
  width: calc(100% + 11px);
  margin-right:-11px;
}

.b img{
  width: calc((100% / 4) - 5px);
  margin: 0 auto;
}

/*tumblr posts*/
.t{
  width:100%;
  margin: 10px 0 0;
  bottom:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  position:absolute;
}

.t img{
  width:100%;
  height:60px;
  object-fit:cover;
  object-position:left;
}

/*stamps*/
.flex img{
  width: calc(100% / 9 - 1px);
  height:42px;
}

/*sidebar column large image*/
#icon{
  border-radius:100%;
  height:200px;
  width:200px;
  object-fit:cover;
  margin:40px;
}

/*sidebar column image decorations*/
#scor{
  animation: bounce 1.2s infinite;
  width:50px;
  top:190px;
  right:50px;
  position:absolute;
  float:right;
}

#bun{
  position:absolute;
  float:left;
  top:10px;
  left:40px;
}

#play{
  position:absolute;
  float:left;
  width:50px;
  top:65px;
  left:15px;
}