/** main colors:
  blue - rgb(70, 92, 134)
  black - rgb(0, 0, 0)
  main size: 15px
  **/
  
body {
  background-image:url(https://i.pinimg.com/736x/f3/68/9e/f3689edae8c2b54188286e25f7762858.jpg);
  padding:10px calc(30% - 220px) 10px calc(30% - 220px);
  font-size:15px;font-family: Arial;color: rgb(70, 92, 134);
  line-height:1.1;
  
  cursor: url(https://u.cubeupload.com/pawbox/SHIfid.gif) 4 4, auto;
}

footer {
  margin-top:20px;
  padding:10px;
  text-align:center;
  font-family:Times;font-weight:bold;
  border-top:2px rgb(70, 92, 134) solid;
}

h1 {
  font-family:Times;font-size:50px;margin:0;
}

p {
  margin:0px 0px 20px 0px;
}

.ptext {
  margin:0px 0px 0px 30px;
}

.link {
  font-family:Times;font-weight:bold;
  color:rgb(70, 92, 134);
  
  cursor: url(https://u.cubeupload.com/pawbox/XHJCrC.gif) 4 4, pointer;
}

.mainbutton {
  background-color: rgb(70, 92, 134);
  font-size:15px;color:white;
  width:200px;height:40px;margin-bottom:5px;
  border: none; border-radius:10px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
  cursor:url(https://u.cubeupload.com/pawbox/XHJCrC.gif) 4 4, pointer;
}

.mainbutton:hover {
  background-color: rgb(37, 51, 77);
  color:rgb(113, 141, 194);
}

::selection { /** for highlighting texts with your cursor **/
  background-color: rgba(73, 106, 166, 0.5);
  color:white;
}

::-webkit-scrollbar { /** for the scrollbar... **/
  width:10px;
}

::-webkit-scrollbar-thumb {
  background-color:rgb(73, 106, 166);
  border-radius:5px;
}

/** seperation from main content **/
#headerbanner {
  height:190px;width:auto;background-size:cover;
  background-image:url(https://u.cubeupload.com/pawbox/GWa4yq.gif);
}

#headerribbon {
  background-image:url(https://u.cubeupload.com/pawbox/beEsr3.png);
  border:3px rgb(70, 92, 134) solid;
  border-radius:5px;display:flex;margin:0px 0px 20px 0px;
}

.ribbonbutton {
  width:100%;height:30px;
  border:transparent;background-color:transparent;
  font-family:Times;font-size:17px;font-weight:bold;color:rgb(70, 92, 134);
  border-left:3px rgb(70, 92, 134) solid;border-radius:5px;
  
  cursor:url(https://u.cubeupload.com/pawbox/XHJCrC.gif) 4 4, pointer;
}

.ribbonbutton:hover {
  color:rgb(37, 51, 77);
  background-color:rgba(70, 92, 134, 0.1);
}

.rlb { /* this is for the way the ribbons are arranged */
  width:100%;height:auto;
}

/** ------ INDEX ------ **/
/** aside section **/
aside {
  float:left;margin:10px 40px 20px 0px;
  padding:5px;width:20%;height:calc(2100px - 50vw);
  border-right: 3px rgb(113, 141, 194) solid;
  font-size:14px;
  
  background-image:url(https://i.pinimg.com/736x/f3/68/9e/f3689edae8c2b54188286e25f7762858.jpg);
  position:relative;z-index: 1; box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 0 5px 5px 0;
}

.asideh1 {
  background-image:url(https://u.cubeupload.com/pawbox/qzfjhi.png);
  padding:10px;border:none;border-radius:10px;font-family:times;
  font-size:calc(8px + 1.2vw);text-align:center;font-weight:bold;color:white;
  margin:0px 5px 10px 5px;
}

/** vinyl section **/
.vinylbutton {
  height:50px;width:100%;border:3px white solid;
  background-color:rgb(70, 92, 134);border-radius:20px;
  color:white;font-family:Times;font-weight:bold;
}

.vinylbutton:hover {
  background-color:rgb(37, 51, 77);
  cursor:url(https://u.cubeupload.com/pawbox/XHJCrC.gif) 4 4, pointer;
}

#vinyl {
  background-image:url(https://u.cubeupload.com/pawbox/okSxo2.gif);
  border:5px white solid;border-radius:999px;
  height:440px;width:440px;
  background-size:cover;flex-shrink:0;
  cursor:url(https://u.cubeupload.com/pawbox/XHJCrC.gif) 4 4, pointer;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
  transition: all .3s ease-in-out;
  position:relative;z-index: 0;
}

#vinyl:hover {
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
  transition: all .3s ease-in-out;
}

@keyframes vinyl {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}
.vinyl {
  animation: vinyl 5s linear infinite;
}

#changetext {
  text-indent:30px;
}

#vinyltitle {
  font-family:times;font-size:25px;font-weight:bold;
  margin:10px 0 10px 0;
}


/** other section **/
#whois {
  background-image:url(https://i.pinimg.com/736x/70/30/50/70305083dc9e80e158bc35f426c4984e.jpg);
  width:auto;height:auto;margin:20px 0 20px 0;
  padding:10px;border-radius:35px;
}

#lastbanner {
  background-image:url(https://u.cubeupload.com/pawbox/1CnQLk.gif);
  background-size:cover;
  width:97%;height:100px;
  margin-top:20px;padding:20px;
  border-radius:10px;
  display:flex;flex-wrap:wrap;
  
}

/** ------ ABOUT ME ------ **/
#pinboard {
  height:50px;width:2420px;
  margin:2px;border:2px black dashed;
  border-radius:0px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
  background-size:cover;
  
  transition: all .3s ease-in-out;
}


#pinboard:hover {
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
  transition: all .3s ease-in-out;
}

/** ------ PROJECTS ------ **/
#artart {
  background-size:cover;
  background-color:rgb(70, 92, 134);
  max-height: 170px;
  margin:5px;border-radius:5px;
  border:3px white solid;
}

.prjdesc {
  background-color:rgba(255, 255, 255, 0.5);
  border-left:2px rgb(70, 92, 134) dashed;
  padding:20px;margin-left:10px;
  font-size:14px;
}

.prjartbor {
  background-color:rgb(113, 141, 194);background-size:cover;
  margin:10px 0px 10px 0px;padding:10px;
  border-radius:3px;
}

/** ------ INTERESTS ------ **/
.intbor {
  background-image:url(https://i.pinimg.com/1200x/d2/06/5e/d2065eb7a35ed2c10de13f710c88f490.jpg);background-size:cover;
  margin:10px 0px 10px 0px;padding:25px 40px 25px 40px;
  border-radius:10px;color:white;overflow: auto;
}

.intbor2 {
  background-color:rgb(203, 215, 238);
  border: 3px rgb(70, 92, 134) solid;border-radius:10px;
  padding:30px 25px 10px 25px;margin:5px;
  display:flex;flex-direction:row;
  font-size:20px;text-align:center;
  width:80%;color:rgb(70, 92, 134);
}

#borderline, #intbor3 {
  padding:20px 40px 20px 40px;margin:10px;
  font-size:15px;
}

#borderline {
  border:3px red dashed;
  animation-duration:8s;
  animation-name: borderline;
  animation-iteration-count:infinite;
}

@keyframes borderline {
  0%   {border:3px red dashed;}
  20%  {border:3px yellow dashed;}
  40%  {border:3px green dashed;}
  60%  {border:3px blue dashed;}
  80%  {border:3px gray dashed;}
  100% {border:3px red dashed;}
}

.blinkies {
  margin:2.5px;
  width:200px;
}