.html { cursor: url('vertopal.com_01.png'), auto; }
.html { pointer: url('vertopal.com_0.png'), auto; }


 .h4 {text-align: center;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

 .a {text-align: center;

}
 .h1 {text-align: center;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
 .h6 {text-align: center;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
 .p {text-align: center;}
 .div {text-align: center;}
        * {
            margin: 0;
            padding: 0;
        }
         
.body {
  background-image: url("top2.png");
    background-attachment: fixed;
   background-size: 60%;
}
.container {
  position: relative;
  width: 110px;
  height: 110px;
  display: inline-block;
}
.container2 {
  position: relative;
  width: relative;
  height: relative;
  display: inline-block;
}

.object {
  animation: MoveUpDown .13s ease infinite;
  position: absolute;
  left: 70%;
  bottom: 10%;
}
.object2 {
  animation: MoveUpDown .2s ease infinite;
  position: absolute;
  left: 80%;
  top: 70%;
}

@keyframes MoveUpDown {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10%);
  }
}
.image {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .4s ease;
  background-color: #ffffff;
}
.overlay2 {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  text-align: center;
  opacity: 0;
  transition: opacity .25s;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}
.container2:hover .overlay2 {
   opacity: 40%;
  background-color: #ffffff;
}

.container:hover .overlay {
  opacity: 40%;
}


.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
a {
    color: #ffffff;
    text-decoration: none;
}

a :hover {
    color: red; 

}

.banner{
  width: 300px;
  border: 4px solid rgb(255, 168, 0);
  display: inline;
  margin: 20px;
}
.divider{
	width: auto;
	border: 4px solid rgb(238, 52, 38);
	background-color: white;
  display: inline-block;
  border-radius: 25px;
  float:right;

}
.divider2{
	width: auto;
	border: 4px solid rgb(238, 52, 38);
	background-color: white;
  display: inline-block;
  border-radius: 25px;
  float:left;

  
}

.box {
    background-color: white;
    color: white;
    position: absolute;
    border: solid white;
    text-align: center;
    display:inline-block;
   left: 19%;
   right: 19%;
    top: 0%;
    width: auto;
    height: auto;
}
#wrapper {
    border: 0px solid blue;
}
#div1 {
    display: inline-block;
    width:auto;
    height:auto;
    border: 4px solid rgb(238, 52, 38);
    background-color: white;
     border-radius: 25px;
}
#div2 {
    display: inline-block;
    width:auto;
    height:auto;
    border: 4px solid rgb(238, 52, 38);
    background-color: white;
     border-radius: 25px;
}
#div3 {
    display: inline-block;
    width:460px;
    height:30px;
    border: 1px solid black;
    text-align: left;
}
#div4 {
    display: inline-block;
    width:20%;
    height:auto;
    border: 1px solid white;
    background-color: white;
    text-align: center;
}


.fredoka-<fucfont> {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: <700>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


.img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
body, html {
  height: 100%;
  
}

.bg {
  /* The image used */
  background-image: url("topimg.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
 a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
 }

/* music player container START */
/* please note, depending on your line spacing and font-size, you may need to adjust things slightly, but this will get the player styled in a basic way */
/* you're free to adjust anything!! if you do something really cool with it, please let me know!! i would love to see */

.freako {
    border: 1px ridge silver; /* player container border */
    width: 190px; /* player container size, change it to whatever works for you but i don't recommend it being too short */
    height: 30px; /* player container height, i like 30px, personally */
    background-color: #000; /* player container backround colour */
    color: #fff; /* player container text colour */
    margin: auto; /* player container margin, this centers it, if you don't want it centered, then feel free to remove this or play around with it */
}
        
.freakoinner {
    border: none; /* player container text area, i recommend no border */
    width: 156px; /* player container text area width, make sure it's not as wide as the main container so the playbutton can work */
    height: 30px; /* player container text area height, should be the same as the main container */
    background-color: transparent; /* player container text area background, you can play with this if you wish */
    color: #fff; /* player container text colour */
    float: left; /* makes the text float left */
    overflow: hidden;
        }
        
.freakobutton {
    float: right; /* makes the play button float right */
    margin-right: 7px; /* additional margin */
}
        
.ico {
    color: #fff; /* play/pause button colour */
    transition: 0.3s; /* controls the button animation upon hover */
}
        
.ico:hover {
    color: grey; /* play/pause button hover colour */
    transition: 0.3s; /* controls the button animation upon hover */
}

.marquee {
   display: flex;
   flex-flow: row nowrap;
   white-space: nowrap;
   justify-content: flex-end;
}

.marqueecont {
   animation: marquee 7s 0s linear normal infinite; /* control the speed of your marquee here if needed */
   position: relative;
   display: inline-block;
   padding-left: 200px; /* mess around with this if your song titles aren't scrolling properly :) */
}

@keyframes marquee {
   0% {
      right: -1rem;
      transform: translate(100%, 0%);
   }
   100% {
      right: calc(100% + 1rem);
      transform: translate(0%, 0%);
   }
}
        

.vehicule {
  position:absolute;
  z-index: 1;
}