.custom-css {
    width: 300px;
    height: 300px;
    background: repeating-linear-gradient(blue, green 50px);
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    animation: 4s poly infinite alternate ease-in-out;
    margin: 10px auto;
}
  
  @keyframes poly {
    from {
      clip-path: polygon(100% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    }
  
    to {
      clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
    }
  }


/*this is for fonts of word attribute "ttf"*/
@font-face{
  font-family: Grilanty400;
  font-display: swap;
  src: url(../Fonts/Grilanty400.ttf);
  
}
.Grilanty400{
  font-family: Grilanty400;
}

@font-face{
  font-family: NEONLEDLight400;
  font-display: swap;
  src: url(../Fonts/NEONLEDLight400.ttf);
  
}
.neonledlight400{
  font-family: NEONLEDLight400;
}

@font-face{
  font-family: BeringSeaPersonalUse400;
  font-display: swap;
  src: url(../Fonts/BeringSeaPersonalUse400.ttf);
  
}
.BeringSeaPersonalUse400{
  font-family: BeringSeaPersonalUse400;
}

@font-face{
  font-family: ComunismoRegular400;
  font-display: swap;
  src: url(../Fonts/ComunismoRegular400.ttf);
  
}
.ComunismoRegular400{
  font-family: ComunismoRegular400;
}

@font-face{
  font-family: HappyEasterEgg500;
  font-display: swap;
  src: url(../Fonts/HappyEasterEgg500.ttf);
  
}
.HappyEasterEgg500{
  font-family: HappyEasterEgg500;
}

@font-face{
  font-family: MeriendaBold;
  font-display: swap;
  src: url(../Fonts/MeriendaBold.ttf);
  
}
.MeriendaBold{
  font-family: MeriendaBold;
}

@font-face{
  font-family: MeriendaRegular;
  font-display: swap;
  src: url(../Fonts/MeriendaRegular.ttf);
  
}
.MeriendaRegular{
  font-family: MeriendaRegular;
}

@font-face{
  font-family: AliceandtheWickedMonster;
  font-display: swap;
  src: url(../Fonts/AliceandtheWickedMonster.ttf);
  
}
.AliceandtheWickedMonster{
  font-family: AliceandtheWickedMonster;
}

@font-face{
  font-family: Amperzand;
  font-display: swap;
  src: url(../Fonts/Amperzand.ttf);
  
}
.Amperzand{
  font-family: Amperzand;
}

@font-face{
  font-family: Arizonia-Regular;
  font-display: swap;
  src: url(../Fonts/Arizonia-Regular.ttf);
  
}
.Arizonia-Regular{
  font-family: Arizonia-Regular;
}

@font-face{
  font-family: armalite;
  font-display: swap;
  src: url(../Fonts/armalite.ttf);
  
}
.armalite{
  font-family: armalite;
}

@font-face{
  font-family: BADABB__;
  font-display: swap;
  src: url(../Fonts/BADABB__.ttf);
  
}
.BADABB__{
  font-family: BADABB__;
}

@font-face{
  font-family: BeforeTheRain_personal_use_demo;
  font-display: swap;
  src: url(../Fonts/BeforeTheRain_personal_use_demo.ttf);
  
}
.BeforeTheRain_personal_use_demo{
  font-family: BeforeTheRain_personal_use_demo;
}

@font-face{
  font-family: BeforeTheRainSwashes_personal_use_demo;
  font-display: swap;
  src: url(../Fonts/BeforeTheRainSwashes_personal_use_demo.ttf);
  
}
.BeforeTheRainSwashes_personal_use_demo{
  font-family: BeforeTheRainSwashes_personal_use_demo;
}

@font-face{
  font-family: boston;
  font-display: swap;
  src: url(../Fonts/boston.ttf);
  
}
.boston{
  font-family: boston;
}

@font-face{
  font-family: BunnyRabbits;
  font-display: swap;
  src: url(../Fonts/BunnyRabbits.ttf);
  
}
.BunnyRabbits{
  font-family: BunnyRabbits;
}

@font-face{
  font-family: CalligraphyFLF;
  font-display: swap;
  src: url(../Fonts/CalligraphyFLF.ttf);
  
}
.CalligraphyFLF{
  font-family: CalligraphyFLF;
}

@font-face{
  font-family: Capsmall;
  font-display: swap;
  src: url(../Fonts/Capsmall.ttf);
  
}
.Capsmall{
  font-family: Capsmall;
}

@font-face{
  font-family: Capsmall_clean;
  font-display: swap;
  src: url(../Fonts/Capsmall_clean.ttf);
  
}
.Capsmall_clean{
  font-family: Capsmall_clean;
}

@font-face{
  font-family: Captureit;
  font-display: swap;
  src: url(../Fonts/Captureit.ttf);
  
}
.Captureit{
  font-family: Captureit;
}

@font-face{
  font-family: CatsAlphabet;
  font-display: swap;
  src: url(../Fonts/CatsAlphabet.ttf);
  
}
.CatsAlphabet{
  font-family: CatsAlphabet;
}

@font-face{
  font-family: charlotte;
  font-display: swap;
  src: url(../Fonts/charlotte.ttf);
  
}
.charlotte{
  font-family: charlotte;
}

@font-face{
  font-family: ConfettiStream;
  font-display: swap;
  src: url(../Fonts/ConfettiStream.ttf);
  
}
.ConfettiStream{
  font-family: ConfettiStream;
}

@font-face{
  font-family: ennobled;
  font-display: swap;
  src: url(../Fonts/ennobled.ttf);
  
}
.ennobled{
  font-family: ennobled;
}

@font-face{
  font-family: FatTats;
  font-display: swap;
  src: url(../Fonts/FatTats.ttf);
  
}
.FatTats{
  font-family: FatTats;
}

@font-face{
  font-family: FFF_Tusj;
  font-display: swap;
  src: url(../Fonts/FFF_Tusj.ttf);
  
}
.FFF_Tusj{
  font-family: FFF_Tusj;
}

@font-face{
  font-family: Fridays;
  font-display: swap;
  src: url(../Fonts/Fridays.ttf);
  
}
.Fridays{
  font-family: Fridays;
}

@font-face{
  font-family: FromCartoonBlocks;
  font-display: swap;
  src: url(../Fonts/FromCartoonBlocks.ttf);
  
}
.FromCartoonBlocks{
  font-family: FromCartoonBlocks;
}

@font-face{
  font-family: Gretoon;
  font-display: swap;
  src: url(../Fonts/Gretoon.ttf);
  
}
.Gretoon{
  font-family: Gretoon;
}

@font-face{
  font-family: GretoonHighlight;
  font-display: swap;
  src: url(../Fonts/GretoonHighlight.ttf);
  
}
.GretoonHighlight{
  font-family: GretoonHighlight;
}

@font-face{
  font-family: Guadalupe;
  font-display: swap;
  src: url(../Fonts/Guadalupe.ttf);
  
}
.Guadalupe{
  font-family: Guadalupe;
}

@font-face{
  font-family: GuadalupeItalic;
  font-display: swap;
  src: url(../Fonts/GuadalupeItalic.ttf);
  
}
.GuadalupeItalic{
  font-family: GuadalupeItalic;
}

@font-face{
  font-family: LuckiestGuy;
  font-display: swap;
  src: url(../Fonts/LuckiestGuy.ttf);
  
}
.LuckiestGuy{
  font-family: LuckiestGuy;
}

@font-face{
  font-family: mrsmonster;
  font-display: swap;
  src: url(../Fonts/mrsmonster.ttf);
  
}
.mrsmonster{
  font-family: mrsmonster;
}

@font-face{
  font-family: mrsmonster3dital;
  font-display: swap;
  src: url(../Fonts/mrsmonster3dital.ttf);
  
}
.mrsmonster3dital{
  font-family: mrsmonster3dital;
}

@font-face{
  font-family: mrsmonsteracad;
  font-display: swap;
  src: url(../Fonts/mrsmonsteracad.ttf);
  
}
.mrsmonsteracad{
  font-family: mrsmonsteracad;
}

@font-face{
  font-family: mrsmonsterboldout;
  font-display: swap;
  src: url(../Fonts/mrsmonsterboldout.ttf);
  
}
.mrsmonsterboldout{
  font-family: mrsmonsterboldout;
}

@font-face{
  font-family: mrsmonstercond;
  font-display: swap;
  src: url(../Fonts/mrsmonstercond.ttf);
  
}
.mrsmonstercond{
  font-family: mrsmonstercond;
}

@font-face{
  font-family: mrsmonstercondital;
  font-display: swap;
  src: url(../Fonts/mrsmonstercondital.ttf);
  
}
.mrsmonstercondital{
  font-family: mrsmonstercondital;
}

@font-face{
  font-family: mrsmonsterexpand;
  font-display: swap;
  src: url(../Fonts/mrsmonsterexpand.ttf);
  
}
.mrsmonsterexpand{
  font-family: mrsmonsterexpand;
}

@font-face{
  font-family: mrsmonsterexpandital;
  font-display: swap;
  src: url(../Fonts/mrsmonsterexpandital.ttf);
  
}
.mrsmonsterexpandital{
  font-family: mrsmonsterexpandital;
}

@font-face{
  font-family: mrsmonsterital;
  font-display: swap;
  src: url(../Fonts/mrsmonsterital.ttf);
  
}
.mrsmonsterital{
  font-family: mrsmonsterital;
}

@font-face{
  font-family: mrsmonsterleft;
  font-display: swap;
  src: url(../Fonts/mrsmonsterleft.ttf);
  
}
.mrsmonsterleft{
  font-family: mrsmonsterleft;
}

@font-face{
  font-family: mrsmonsterout;
  font-display: swap;
  src: url(../Fonts/mrsmonsterout.ttf);
  
}
.mrsmonsterout{
  font-family: mrsmonsterout;
}

@font-face{
  font-family: mrsmonsteroutital;
  font-display: swap;
  src: url(../Fonts/mrsmonsteroutital.ttf);
  
}
.mrsmonsteroutital{
  font-family: mrsmonsteroutital;
}

@font-face{
  font-family: mrsmonsterrotal;
  font-display: swap;
  src: url(../Fonts/mrsmonsterrotal.ttf);
  
}
.mrsmonsterrotal{
  font-family: mrsmonsterrotal;
}

@font-face{
  font-family: mrsmonsterrotate;
  font-display: swap;
  src: url(../Fonts/mrsmonsterrotate.ttf);
  
}
.mrsmonsterrotate{
  font-family: mrsmonsterrotate;
}

@font-face{
  font-family: mrsmonsterrotate2;
  font-display: swap;
  src: url(../Fonts/mrsmonsterrotate2.ttf);
  
}
.mrsmonsterrotate2{
  font-family: mrsmonsterrotate2;
}

@font-face{
  font-family: orangejuice2;
  font-display: swap;
  src: url(../Fonts/orangejuice2.ttf);
  
}
.orangejuice2{
  font-family: orangejuice2;
}

@font-face{
  font-family: planetbe;
  font-display: swap;
  src: url(../Fonts/planetbe.ttf);
  
}
.planetbe{
  font-family: planetbe;
}

@font-face{
  font-family: RemachineScript_Personal_Use;
  font-display: swap;
  src: url(../Fonts/RemachineScript_Personal_Use.ttf);
  
}
.RemachineScript_Personal_Use{
  font-family: RemachineScript_Personal_Use;
}

@font-face{
  font-family: SnackerComic_PerosnalUseOnly;
  font-display: swap;
  src: url(../Fonts/SnackerComic_PerosnalUseOnly.ttf);
  
}
.SnackerComic_PerosnalUseOnly{
  font-family: SnackerComic_PerosnalUseOnly;
}

@font-face{
  font-family: STONB___;
  font-display: swap;
  src: url(../Fonts/STONB___.ttf);
  
}
.STONB___{
  font-family: STONB___;
}

@font-face{
  font-family: Windsong;
  font-display: swap;
  src: url(../Fonts/Windsong.ttf);
  
}
.Windsong{
  font-family: Windsong;
}


/*this is for fonts of word attribute "otf"*/
@font-face{
  font-family: Createland400;
  font-display: swap;
  src: url(../Fonts/Createland400.otf);
  
}
.Createland400{
  font-family: Createland400;
}

@font-face{
  font-family: BrothersideSignature400;
  font-display: swap;
  src: url(../Fonts/BrothersideSignature400.otf);
  
}
.BrothersideSignature400{
  font-family: BrothersideSignature400;
}

@font-face{
  font-family: LoveMatch400;
  font-display: swap;
  src: url(../Fonts/LoveMatch400.otf);
  
}
.LoveMatch400{
  font-family: LoveMatch400;
}

@font-face{
  font-family: NightForest400;
  font-display: swap;
  src: url(../Fonts/NightForest400.otf);
  
}
.NightForest400{
  font-family: NightForest400;
}

@font-face{
  font-family: ProspectPERSONALUSEONLYRegular400;
  font-display: swap;
  src: url(../Fonts/ProspectPERSONALUSEONLYRegular400.otf);
  
}
.ProspectPERSONALUSEONLYRegular400{
  font-family: ProspectPERSONALUSEONLYRegular400;
}

@font-face{
  font-family: StannumTrialBold700;
  font-display: swap;
  src: url(../Fonts/StannumTrialBold700.otf);
  
}
.StannumTrialBold700{
  font-family: StannumTrialBold700;
}

@font-face{
  font-family: StannumTrialLight300;
  font-display: swap;
  src: url(../Fonts/StannumTrialLight300.otf);
  
}
.StannumTrialLight300{
  font-family: StannumTrialLight300;
}

@font-face{
  font-family: StannumTrialMedium500;
  font-display: swap;
  src: url(../Fonts/StannumTrialMedium500.otf);
  
}
.StannumTrialMedium500{
  font-family: StannumTrialMedium500;
}

@font-face{
  font-family: StannumTrialRegular400;
  font-display: swap;
  src: url(../Fonts/StannumTrialRegular400.otf);
  
}
.StannumTrialRegular400{
  font-family: StannumTrialRegular400;
}

@font-face{
  font-family: AeroliteCPone;
  font-display: swap;
  src: url(../Fonts/AeroliteCPone.otf);
  
}
.AeroliteCPone{
  font-family: AeroliteCPone;
}

@font-face{
  font-family: AeroliteCPtwo;
  font-display: swap;
  src: url(../Fonts/AeroliteCPtwo.otf);
  
}
.AeroliteCPtwo{
  font-family: AeroliteCPtwo;
}

@font-face{
  font-family: charlotte;
  font-display: swap;
  src: url(../Fonts/charlotte.otf);
  
}
.charlotte{
  font-family: charlotte;
}

@font-face{
  font-family: Guadalupe;
  font-display: swap;
  src: url(../Fonts/Guadalupe.otf);
  
}
.Guadalupe{
  font-family: Guadalupe;
}

@font-face{
  font-family: GuadalupeItalic;
  font-display: swap;
  src: url(../Fonts/GuadalupeItalic.otf);
  
}
.GuadalupeItalic{
  font-family: GuadalupeItalic;
}

@font-face{
  font-family: Lobster_1;
  font-display: swap;
  src: url(../Fonts/Lobster_1.otf);
  
}
.Lobster_1{
  font-family: Lobster_1;
}

@font-face{
  font-family: LobsterTwo-Bold;
  font-display: swap;
  src: url(../Fonts/LobsterTwo-Bold.otf);
  
}
.LobsterTwo-Bold{
  font-family: LobsterTwo-Bold;
}

@font-face{
  font-family: LobsterTwo-BoldItalic;
  font-display: swap;
  src: url(../Fonts/LobsterTwo-BoldItalic.otf);
  
}
.LobsterTwo-BoldItalic{
  font-family: LobsterTwo-BoldItalic;
}

@font-face{
  font-family: LobsterTwo-Italic;
  font-display: swap;
  src: url(../Fonts/LobsterTwo-Italic.otf);
  
}
.LobsterTwo-Italic{
  font-family: LobsterTwo-Italic;
}

@font-face{
  font-family: LobsterTwo-Regular;
  font-display: swap;
  src: url(../Fonts/LobsterTwo-Regular.otf);
  
}
.LobsterTwo-Regular{
  font-family: LobsterTwo-Regular;
}

@font-face{
  font-family: MonaShark;
  font-display: swap;
  src: url(../Fonts/MonaShark.otf);
  
}
.MonaShark{
  font-family: MonaShark;
}

@font-face{
  font-family: Sofia-Regular;
  font-display: swap;
  src: url(../Fonts/Sofia-Regular.otf);
  
}
.Sofia-Regular{
  font-family: Sofia-Regular;
}

@font-face{
  font-family: WarWound;
  font-display: swap;
  src: url(../Fonts/WarWound.otf);
  
}
.WarWound{
  font-family: WarWound;
}